<template>
  <p></p>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="特殊检查：">
      <el-popover placement='bottom' :width="400" trigger="click">
        <template #reference>
          <el-input v-model="form.date1" type="textarea"
                    ref="input1Ref"  @input="handleInput"/>
        </template>
        <el-table :data="gridData"  @cell-click='selectTemp'>
          <el-table-column width="400" property="address" label="模板" />
        </el-table>
      </el-popover>
    </el-form-item>
    <el-form-item label="细胞学结果：">
      <el-popover placement='bottom' :width="400" trigger="click">
        <template #reference>
          <el-input v-model="form.date2" type="textarea" />
        </template>
        <el-table :data="gridData">
          <el-table-column width="400" property="address" label="模板" />
        </el-table>
      </el-popover>
    </el-form-item>
    <el-form-item label="备注：">
      <el-popover placement='bottom' :width="400" trigger="click">
        <template #reference>
          <el-input v-model="form.desc" type="textarea" />
        </template>
        <el-table :data="gridData">
          <el-table-column width="400" property="address" label="模板" />
        </el-table>
      </el-popover>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive,ref } from 'vue'

const input1Ref =ref(null);
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '(左侧甲状腺结节穿刺涂片)找到少量滤泡上皮，分化良好，未见恶性证据 ',
  resource: '',
  desc: '',
})
const gridData = [
  {
    address: '无慢性咳嗽、咳痰、咯血、呼吸困难、胸痛史。',
  },
  {
    address: '无心悸、活动后气促、心前区痛、下肢水肿、腹水、头晕、头痛、晕厥，高血压史。',
  },
  {
    address: '无食欲减退、反酸、嗳气、恶心、呕吐、腹胀、腹痛、腹泻、便秘、呕血、黑便、黄疸史',
  },
  {
    address: '无皮肤苍白、头晕、眼花、皮肤出血点、瘀斑、肝脾淋巴结肿大、骨骼疼痛史',
  },
]
const onSubmit = () => {
  console.log('submit!')
}
const selectTemp = (row: any, column: any) => {
  console.log(row);
  const pos = getCaretPosition()
  this.text = this.text.slice(0, pos) + row.address + this.text.slice(pos);
}
const getCaretPosition = () =>{
  let caretPos = 0
  const input = input1Ref
  if (document.selection) {
    input.focus()
    const sel = document.selection.createRange()
    sel.moveStart('character', -input.value.length)
    caretPos = sel.text.length
  } else if (input.selectionStart || input.selectionStart === 0) {
    caretPos = input.selectionStart
  }
  return caretPos
}
</script>

<style scoped>
</style>
